<script lang="ts" setup>
import { http } from '@/utils/https';
import { ref } from 'vue';
const ReEmail = ref({
  email: '',
  password: '',
  repassword: '',
  code: '',

})
const showPassword = ref(false)
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value
}
const validateEmail = (email: string) => {
  const regex = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/
  return regex.test(email)
}

const validatePassword = (password: string) => {
  const regex = /^(?=.*[a-zA-Z])(?=.*\d).{6,18}$/
  return regex.test(password)
}

const register = async () => {
  if (!validateEmail(ReEmail.value.email)) {
    uni.showToast({ title: '邮箱格式不正确', icon: 'none' })
    return
  }
  if (!validatePassword(ReEmail.value.password)) {
    uni.showToast({ title: '密码格式不正确', icon: 'none' })
    return
  }
  if (ReEmail.value.password !== ReEmail.value.repassword) {
    uni.showToast({ title: '两次输入的密码不一致', icon: 'none' })
    return
  }

  try {
    const response = await http({
      url: 'uesr/register/',
      method: 'POST',
      data: {
        email: ReEmail.value.email,
        password: ReEmail.value.password,
        code: ReEmail.value.code
      }
    })

    if (response.code === 200) {
      uni.showToast({ title: '注册成功', icon: 'success' })
      // 保存返回的 cookie
      const cookies = response.headers['set-cookie']
      if (cookies) {
        uni.setStorageSync('cookie', cookies)
      }
      // 这里可以跳转到登录页面或者其他页面
    } else {
      uni.showToast({ title: response.msg || '注册失败', icon: 'none' })
    }
  } catch (error) {
    uni.showToast({ title: '网络错误，请稍后重试', icon: 'none' })
  }
}
</script>
<template>
  <view class="mask" catchtouchmove="true">
    <view class="top">
      <view class="navbar">
        <img class="login-img" src="@/static/images/login_img_illustration@2x.png" />
      </view>
      <view class="botton">
        <view class="input-box">
          <view class="input-box-top">
            <input class="input top-input" type="tel" placeholder="请输邮箱号" />
          </view>
          <view class="input-box-botton">
            <view class="box">
              <input class="input botton-passwrod" data="passworedtype" placeholder="请输入密码" />
              <img class="login-icon-top" src="@/static/images/眼睛动态组件_login_icon_eye_def@2x.png" />
              <input class="input botton-repassword" type="password" name="pwd" data="passworedtype"
                placeholder="请重复密码" />
              <view class="emailver">
                <input class="input botton-email-ver" type="text" placeholder="请输邮箱验证码" />
                <span class="email-ver-text">获取验证码</span>
              </view>
            </view>
          </view>
        </view>
        <view class="text"> </view>
        <view class="login-button">立即注册</view>
        <view class="agreement">
          <checkbox class="interestthreecheckbox" />
          <!-- <input type="checkbox"> -->
        </view>
        <view class="agreement-text">已阅读协议<span class="xy">《协议链接》</span></view>
        <view class="button">
          <!-- <button>
            点击跳转
          </button> -->
        </view>
      </view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
.mask {
  position: relative;

  .top {
    .navbar {
      width: 750rpx;
      height: 500rpx;
      background: #f2bb16;

      .login-img {
        margin: 32rpx 54rpx;
        width: 628rpx;
        height: 378rpx;
      }
    }

    .botton {
      position: absolute;
      top: 464rpx;
      width: 750rpx;
      // height: 934rpx;
      height: 800rpx;
      background: #fff;
      border-radius: 40rpx 40rpx 0rpx 0rpx;

      .input-box {
        position: relative;

        .input-box-top {
          position: absolute;
          top: 100rpx;
          left: 100rpx;

          .top-text {
            position: absolute;
            top: 8px;
            left: 8px;
            font-size: 14px;
          }
        }

        .input-box-botton {
          display: flex;
          // flex-direction: row;
          position: absolute;
          // align-items: center;
          top: 200rpx;
          left: 100rpx;
          width: 100%;

          .box {
            display: flex;
            position: relative;
            flex-direction: column;
            align-items: center;

            .login-icon-top {
              position: absolute;
              width: 48rpx;
              height: 48rpx;
              margin-left: 466rpx;
              margin-top: 6px;
            }

            .imgver {
              margin-top: 30rpx;
              display: flex;
              width: 100%;

              .botton-img-ver {
                width: 300rpx;
              }

              .ver-img {
                // flex: 1;
                margin-left: 40rpx;
                width: 200rpx;
                height: 70rpx;
              }
            }

            .emailver {
              position: relative;
              display: flex;
              flex-direction: column;
              width: 100%;

              .botton-email-ver {
                margin-top: 40rpx;
              }

              .email-ver-text {
                position: absolute;
                top: 54rpx;
                right: 20rpx;
                margin-left: 10rpx;
                font-size: 26rpx;
                font-weight: 400;
                color: #326a94;
                // width: 80px;
                height: 30rpx;
                text-align: CENTER;
                line-height: 40rpx;
              }
            }

            .botton-passwrod {
              margin-top: 2rpx;
            }

            .botton-repassword {
              margin-top: 30rpx;
            }
          }

          .login-icon {
            position: absolute;
            width: 48rpx;
            height: 48rpx;
            background-color: #f2bb16;
          }
        }

        .input {
          width: 540rpx;
          height: 70rpx;
          background: #fffdfd;
          border: 2rpx solid #c0bfbf;
          border-radius: 20rpx;
          font-size: 26rpx;
          font-weight: 400;
          box-sizing: border-box;
          text-indent: 10rpx;
          padding-left: 10rpx;

          &::placeholder {
            color: #bbbaba;
          }

          line-height: 32rpx;
        }
      }
    }
  }

  .text {
    width: 100%;

    .text-left {
      display: inline-block;
      margin-top: 412rpx;
      margin-left: 50rpx;
      width: 198rpx;
      height: 30rpx;
      font-size: 26rpx;
      font-weight: 400;
      text-align: CENTER;
      color: #326a94;
      line-height: 32rpx;
    }

    .text-right {
      display: inline-block;
      margin-left: 230rpx;
      width: 198rpx;
      height: 30rpx;

      font-size: 26rpx;
      font-weight: 400;
      text-align: CENTER;
      color: #326a94;
      line-height: 32rpx;
    }
  }

  .login-button {
    margin-top: 640rpx;
    margin-left: 164rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 410rpx;
    height: 70rpx;
    background: #f2bb16;
    border-radius: 40rpx;
  }

  .agreement {
    display: inline-block;

    // align-items: center;
    // justify-content: center;
    .interestthreecheckbox {
      margin-left: 130px;
      border-radius: 80%;
      width: 14px;
      height: 14px;
    }
  }

  .agreement-text {
    display: inline-block;
    // align-items: center;
    // justify-content: center;
    margin-left: 30rpx;
    margin-top: 54rpx;
    width: 286rpx;
    height: 32rpx;
    font-size: 26rpx;
    // font-family: Inter, Inter-400;
    font-weight: 400;
    text-align: center;
    color: #000000;
    line-height: 30rpx;

    .xy {
      color: #326a94;
    }
  }
}
</style>
